@charset "utf-8";
@function r($px) {
    @return $px/100*1rem;
}

* {
    padding: 0;
    margin: 0;
}

html,
body {
    width: 100%;
    height: 100%;
}

.wrap {
    width: 100%;
    height: 100%;
    background: url(../img/index/index_bg.png) no-repeat left top/cover;
    overflow: hidden;
    position: relative;
    .main_title {
        width: r(492);
        height: r(449);
        margin: r(190) auto 0;
        background: url(../img/index_title.png) no-repeat left top/contain;
    }
    .balloon {
        position: absolute;
        top: r(550);
        right: r(140);
        width: r(56);
        height: r(88);
        background: url(../img/index/balloon.png) no-repeat left top/cover;
    }
    .water {
        position: absolute;
        right: r(20);
        bottom: 0;
        width: r(177);
        height: r(147);
        background: url(../img/bottles.png) no-repeat left top/cover;
    }
    .ball_box {
        width: r(185);
        height: r(185);
        position: absolute;
        top: r(741);
        left: 50%;
        transform: translateX(-50%);
        transition: all 1s linear;
        .ball_bg2 {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: url(../img/index/ball_bg2.png) no-repeat left top/cover;
            animation: ball_bg 2s linear infinite;
        }
        .ball_bg1 {
            width: r(148);
            height: r(148);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: url(../img/index/ball_bg1.png) no-repeat left top/cover;
            animation: ball_bg 2s linear infinite;
        }
        .ball {
            width: r(126);
            height: r(126);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: url(../img/game_ui/ball.png) no-repeat left top/cover;
        }
    }
    .start {
        position: absolute;
        bottom: r(120);
        left: 50%;
        transform: translateX(-50%);
        font-size: r(24);
        font-weight: bold;
        text-align: center;
        color: white;
    }
    .explain {
        width: r(254);
        height: r(59);
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        background: url(../img/explain.png) no-repeat left top/contain;
    }
}

@keyframes ball_bg {
    0%,
    100% {
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
}

.ball_rotate{
    animation: ball_rotate 1s ease-in infinite;
}

@keyframes ball_rotate {
    0%{
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(720deg);
    }
}